// +----------------------------------------------------------------------
// | LikeShop100%开源免费商用电商系统
// +----------------------------------------------------------------------
// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
// | 开源版本可自由商用，可去除界面版权logo
// | 商业版本务必购买商业授权，以免引起法律纠纷
// | 禁止对系统程序代码以任何目的，任何形式的再发布
// | Gitee下载：https://gitee.com/likemarket/likeshopv2
// | 访问官网：https://www.likemarket.net
// | 访问社区：https://home.likemarket.net
// | 访问手册：http://doc.likemarket.net
// | 微信公众号：好象科技
// | 好象科技开发团队 版权所有 拥有最终解释权
// +----------------------------------------------------------------------
// | Author: LikeShopTeam
// +----------------------------------------------------------------------

<template>
	<view class="activity-detail-contain">
		<view class="header row-start" v-if="goodsList.length">
			<text class="white header-title"> {{title}} <text class="white xxs ml20">{{name}}</text></text>
		</view>
		<view class="content">
			<view class="goods-container">
				<block v-for="(item, index) in goodsList" :key="item.id">
					<view class="goods-item-one" @tap="goGoodsDetail(item)">
						<!-- Image -->
						<view style="width: 220rpx;height: 220rpx;position: relative;">
							<u-image width="220" height="220" border-radius="4px" :src="item.image" />
							<image v-if="item.lease_goods.is_pt==1" src="@/static/images/zy_logo.png"
								style="position: absolute;left: 10rpx;bottom: 10rpx;width: 100rpx;" mode="widthFix">
							</image>
						</view>

						<view class="goods-info" style="width: calc(100% - 220rpx);">
							<!-- Name -->
							<view class="row" style="width: 100%;gap: 10rpx;">
								<view v-if="item.lease_goods.is_pt==1||item.lease_goods.is_pt==0" class="lease-icon">租
								</view>
								<view
									v-if="item.lease_goods.is_pt==3||item.lease_goods.is_pt==1||item.lease_goods.is_pt==0"
									class="sale-icon">售</view>
								<view class="goods-name line1" style="flex: 1;">{{
				                    item.name
				                }}</view>
							</view>
							<!-- Tag -->
							<view class="row mt10">
								<view class="goods-tag mr30">
									“已有{{item.buy_num}}次购买”
								</view>
								<view class="goods-tag" v-if="item.lease_goods.is_pt!=3">
									“已有{{item.lease_goods.lease_num}}次租赁”
								</view>
							</view>
							<!-- Price -->
							<view class="ornament goods-price" style="margin-top: 10rpx;">
								<view>
									<text class="xs">¥</text>
									<!-- 整数 -->
									<text class="xxl">{{
				                        formatPrice(item.lease_goods.is_pt==3?item.price:item.lease_goods.min_price, 'integer')
				                    }}</text>
									<!-- 小数 -->
									<text class="xs">{{
				                        formatPrice(item.lease_goods.is_pt==3?item.price:item.lease_goods.min_price, 'decimals')
				                    }}</text>
									<!-- 单位 -->
									<text v-if="item.lease_goods.is_pt!=3" class="xs">/天</text>
								</view>
								<deposit-tag v-if="item.lease_goods.is_pt!=3" :price="item.price"></deposit-tag>
								<view v-if="item.lease_goods.is_pt==3" class="line-through muted">
									￥{{item.market_price}}
								</view>
								<image v-if="item.lease_goods.is_pt==3" src="@/static/images/you.png" mode="widthFix"
									style="width: 40rpx;"></image>
							</view>
							<view class="row mt10" style="gap:20rpx">
								<view v-if="item.lease_goods.is_pt!=3" @click.stop="goGoodsDetailForBtn(1,item)"
									class="user-btn" style="--color:#3fd57b">
									立即租赁
								</view>
								<view @click.stop="goGoodsDetailForBtn(2,item)" class="user-btn"
									style="--color:var(--primary-color)">
									立即购买
								</view>
							</view>
						</view>
					</view>
				</block>

			</view>
			<loading-footer slot-empty :status="status">
				<view slot="empty" class="data-null column-center" style="padding-top: 500rpx">
					<image class="img-null" :src="imgUrl+'images/goods_null.png'"></image>
					<view class="lighter">暂无活动商品～</view>
				</view>
			</loading-footer>
		</view>
	</view>
</template>

<script>
	import {
		loadingType
	} from '@/utils/type';
	import {
		getActivityGoodsLists
	} from "@/api/activity";

	import {
		loadingFun,
		formatPrice
	} from "@/utils/tools";
	export default {
		data() {
			return {
				status: loadingType.LOADING,
				goodsList: [],
				page: 1,
				name: '',
				title: ''
			};
		},

		components: {},
		props: {},

		onLoad: function(options) {
			this.id = options.id;
			this.title = options.title,
				this.name = options.name
			uni.setNavigationBarTitle({
				title: options.title
			});
			this.getActivityGoodsListsFun();
		},



		onReachBottom: function() {
			this.getActivityGoodsListsFun();
		},

		methods: {
			async getActivityGoodsListsFun() {
				let {
					page,
					status,
					goodsList
				} = this;
				const data = await loadingFun(getActivityGoodsLists, page, goodsList, status, {
					id: this.id
				})
				if (!data) return
				this.page = data.page
				this.goodsList = data.dataList
				this.status = data.status
			},
			// 查看商品详情
			goGoodsDetail(item) {
				if (item.lease_goods.is_pt != 3) return uni.navigateTo({
					url: '/bundle/pages/lease_goods_details/lease_goods_details' + '?' + 'id=' + item
						.lease_goods.id
				});
				uni.navigateTo({
					url: '/package_goods/pages/goods_detail/index' + '?' + 'id=' + item.id
				})
			},
			goGoodsDetailForBtn(type, item) {
				let url = '/bundle/pages/lease_goods_details/lease_goods_details' + '?' + 'id=' + item.lease_goods.id
				if (type == 2)
					url = '/package_goods/pages/goods_detail/index' + '?' + 'id=' + item.id
				uni.navigateTo({
					url
				})
			},
			formatPrice
		}
	};
</script>
<style>
	.activity-detail-contain .header {
		background-image: url(../../static/images/activity_detail_bg.png);
		background-size: 100% 100%;
		height: 340rpx;
		width: 100%;
		padding-left: 24rpx;
		box-sizing: border-box;
		padding-top: 20rpx;
	}

	.activity-detail-contain .header .header-title {
		font-size: 47rpx;
	}

	.activity-detail-contain .content {
		margin-top: -240rpx;
		padding: 0 20rpx;
	}

	.activity-detail-contain .content .goods-container .goods-item {
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
	}

	.activity-detail-contain .content .goods-container .goods-item .goods-img {
		width: 180rpx;
		height: 180rpx;
		flex: none;
	}

	.activity-detail-contain .content .goods-container .goods-item .goods-info {
		flex: 1;
	}

	.activity-detail-contain .content .goods-container .goods-item .goods-info .goods-name {
		line-height: 40rpx;
	}

	.activity-detail-contain .content .goods-container .goods-item .goods-info .count-buy {
		background-color: #FEF0DA;
		color: #F77A0C;
		padding: 4rpx 18rpx;
		display: inline-flex;
	}

	.activity-detail-contain .content .goods-container .goods-item .goods-info .buy-btn {
		padding: 0rpx 34rpx;
		height: 60rpx;
		color: white;
		background: linear-gradient(90deg, #F95F2F 0%, #FF2C3C 100%);
	}

	.goods-container .data-null {
		padding-top: 225rpx;
	}

	.goods-item-one {
		box-sizing: border-box;
		display: flex;
		padding: 20rpx;
		border-radius: 7px;
		background-color: #ffffff;
	}
	
	.goods-info {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 14rpx;
	}
	
	.lease-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 38rpx;
		min-width: 38rpx;
		min-height: 28rpx;
		flex: 1;
		/* margin-right: 10rpx; */
		border-radius: 4rpx;
		font-size: 22rpx;
		background-color: #01d171;
		color: #ffffff;
	}
	
	.sale-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 38rpx;
		min-width: 38rpx;
		min-height: 28rpx;
		flex: 1;
		/* margin-right: 10rpx; */
		border-radius: 4rpx;
		font-size: 22rpx;
		background-color: #1e8af4;
		color: #ffffff;
	}
	
	.goods-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.goods-tag {
		/* padding: 8rpx 10rpx; */
		/* margin-right: 20rpx; */
		/* border-radius: 4px; */
		/* font-size: 22rpx; */
		/* background-color: rgba(36, 163, 255, 0.1); */
		/* color: #24a3ff; */
		color: #F79C0C;
		font-size: 24rpx;
	}
	
	.goods-price {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		gap: 20rpx;
	}
	
	.user-btn {
		--color: blue;
		line-height: 60rpx;
		border: 2rpx solid var(--color);
		border-radius: 60rpx;
		flex: 1;
		color: var(--color);
		box-sizing: border-box;
		text-align: center;
	}
</style>